import React, {Component} from 'react';
import {Form, Icon, Input, Modal,Select} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
class SchoolForm extends Component{

    constructor(props){
        super(props);
        this.state = {
            provinces: [{ 'provinceId': '11', 'province': '北京' }, { 'provinceId': '12', 'province': '天津' },
            { 'provinceId': '13', 'province': '河北' }, { 'provinceId': '36', 'province': '江西' },
            { 'provinceId': '15', 'province': '内蒙古' }, { 'provinceId': '21', 'province': '辽宁' },
            { 'provinceId': '22', 'province': '吉林' }, { 'provinceId': '23', 'province': '黑龙江' },
            { 'provinceId': '31', 'province': '上海' }, { 'provinceId': '32', 'province': '江苏' },
            { 'provinceId': '33', 'province': '浙江' }, { 'provinceId': '34', 'province': '安徽' },
            { 'provinceId': '35', 'province': '福建' }, { 'provinceId': '37', 'province': '山东' },
            { 'provinceId': '41', 'province': '河南' }, { 'provinceId': '42', 'province': '湖北' },
            { 'provinceId': '43', 'province': '湖南' }, { 'provinceId': '44', 'province': '广东' },
            { 'provinceId': '45', 'province': '广西' }, { 'provinceId': '46', 'province': '海南' },
            { 'provinceId': '50', 'province': '重庆' }, { 'provinceId': '52', 'province': '贵州' },
            { 'provinceId': '62', 'province': '甘肃' }, { 'provinceId': '64', 'province': '宁夏' },
            { 'provinceId': '14', 'province': '山西' }, { 'provinceId': '51', 'province': '四川' },
            { 'provinceId': '61', 'province': '陕西' }, { 'provinceId': '63', 'province': '青海' },
            { 'provinceId': '54', 'province': '西藏' }, { 'provinceId': '65', 'province': '新疆' },
            { 'provinceId': '53', 'province': '云南' }],
            areas: [{
                'continent_id': '1', 'continent_name': '港澳台',
                'country': [
                { 'country_id': '2', 'country_name': '香港' },
                { 'country_id': '3', 'country_name': '澳门' },
                { 'country_id': '4', 'country_name': '台湾' }]
            },
            {
                'continent_id': '2', 'continent_name': '亚洲', 
                'country': [
                { 'country_id': '1', 'country_name': '中国' },
                { 'country_id': '20', 'country_name': '新加坡' },
                { 'country_id': '21', 'country_name': '韩国' },
                { 'country_id': '22', 'country_name': '日本' },
                { 'country_id': '26', 'country_name': '俄罗斯' }]
            },
            {
                'continent_id': '3', 'continent_name': '欧洲',
                'country': [
                { 'country_id': '13', 'country_name': '英国' },
                { 'country_id': '29', 'country_name': '法国' },
                { 'country_id': '30', 'country_name': '荷兰' },
                { 'country_id': '32', 'country_name': '德国' },
                { 'country_id': '33', 'country_name': '瑞士' },
                { 'country_id': '36', 'country_name': '意大利'},
                { 'country_id': '41', 'country_name': '瑞典' },
                { 'country_id': '43', 'country_name': '挪威' },
                ] 
            },
            {
                'continent_id': '4', 'continent_name': '北美', 
                'country': [{ 'country_id': '11', 'country_name': '美国' },{ 'country_id': '12', 'country_name': '加拿大' }]
            },
            {
                'continent_id': '5', 'continent_name': '澳洲',
                'country': [{ 'country_id': '14', 'country_name': '澳大利亚' },{ 'country_id': '15', 'country_name': '新西兰' }]
            }],
            selectArea: [],
        }
    }
    componentDidMount(){
    }

    //地区选择
    handleAreaChange = (value) => {
        const { form } = this.props;
        this.state.areas.map(area => {
            if (parseInt(area.continent_id) === value) {
                form.setFieldsValue({
                    continentName: area.continent_name
                });
                this.setState({
                    selectArea: area.country
                })
            }
        })
    }

    //地区选择
    handleCountryChange = (value) => {
        const { form } = this.props;
        this.state.selectArea.map(country => {
            if (parseInt(country.country_id) === value) {
                form.setFieldsValue({
                    countryName: country.country_name
                });
            }
        })
    }

    render(){
        const { visible, onCancel, onCreate, form, okText, title } = this.props;
        const { getFieldDecorator } = form;
        const FormItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        return (
            <Modal
                visible={visible}
                title={title}
                okText={okText}
                onCancel={onCancel}
                onOk={onCreate}>
                <Form layout="horizontal">
                    {getFieldDecorator('id')(
                        <Input type='hidden'/>
                    )}
                    <FormItem label="区域" {...FormItemLayout} hasFeedback>
                         {getFieldDecorator('continentName')(
                            <Input type='hidden'/>
                        )}
                        {getFieldDecorator('continentId', {
                            rules: [{ required: true, message: '请选择区域' }],
                        })(
                            <Select style={{ width: 180 }}  onChange={(value) => this.handleAreaChange(value)}>
                                {this.state.areas.map(area => (
                                    <Option key={area.continent_id} value={parseInt(area.continent_id)}>{area.continent_name}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="国家/地区" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('countryName')(
                            <Input type='hidden'/>
                        )}
                        {getFieldDecorator('countryId', {
                            rules: [{ required: true, message: '请选择国家/地区' }],
                        })(
                            <Select style={{ width: 180 }}  onChange={(value) => this.handleCountryChange(value)}>
                               
                                {this.state.selectArea.map(area => (
                                    <Option key={area.country_id} value={parseInt(area.country_id)}>{area.country_name}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="学校名称" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('schoolName', {
                            rules: [{ required: true, message: '请输入学校名称！' }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="省份" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('provinceId', {
                            rules: [{ required: false}],
                        })(
                            <Select style={{ width: 180 }} >
                                {this.state.provinces.map(province =>(
                                    <Option key={province.provinceId} value={parseInt(province.provinceId)}>{province.province}</Option>
                                ))
                                }

                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="城市名" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('cityId')(
                            <Input type='hidden'/>
                        )}
                        {getFieldDecorator('cityName', {
                            rules: [{ required: false }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}

const SchoolCreateForm = Form.create()(SchoolForm);
export default SchoolCreateForm;